import React, { Component } from 'react'

export default class FooterTodo extends Component {
  handleChange = (active) => {
    return () => {
      this.props.editActive(active)
    }
  }

  render() {
    const { handleDel, itemsLeft, active, clearBtn } = this.props
    return (
      <footer className="footer">
        <span className="todo-count">
          <strong>{itemsLeft}</strong> item left
        </span>
        <ul className="filters">
          <li onClick={this.handleChange('all')}>
            <a className={active === 'all' ? 'selected' : ''} href="#/">
              All
            </a>
          </li>
          <li onClick={this.handleChange('active')}>
            <a
              className={active === 'active' ? 'selected' : ''}
              href="#/active"
            >
              Active
            </a>
          </li>
          <li onClick={this.handleChange('completed')}>
            <a
              className={active === 'completed' ? 'selected' : ''}
              href="#/completed"
            >
              Completed
            </a>
          </li>
        </ul>
        {clearBtn ? (
          <button onClick={() => handleDel()} className="clear-completed">
            Clear completed
          </button>
        ) : null}
      </footer>
    )
  }
}
